<template>
	<el-upload action="#" :limit="1" :auto-upload="false" :on-change="handleChange">
		<template #trigger>
			<el-button type="primary">选择文件</el-button>
		</template>
		<template #default>
			<el-button type="primary" @click="uploadBtn" style="margin-left:10px;">确定上传</el-button>
		</template>
		<template #tip>
			<div class="el-upload__tip" style="color:grey;">
				仅可上传一个pdf文件
			</div>
		</template>
	</el-upload>

	<el-table :data="tableData" style="width: 100%" v-if="done">
    <el-table-column prop="图片名称:" label="图片名" width="180" />
    <el-table-column prop="图片类别描述：" label="图片类别描述" width="180" />
    <el-table-column prop="准确率：" label="准确率" />
  </el-table>
</template>
  
 
<script setup>
import { reactive, ref } from 'vue';
import Api from '../util/axios';

const fileUpload = ref()
const form = reactive({
	name: ''
})
const done = ref(false)
const tableData = ref([])
// 选择文件时被调用，将他赋值给fileUpload
const handleChange = (file) => {
	fileUpload.value = file
}

const child = ref(null)
// 确定上传
const uploadBtn = () => {
	let param = new FormData()
	// 如果是多个文件数组就循环添加一下就ok了
	console.log(fileUpload);

	param.append("file", fileUpload.value.raw)
	param.append("name", form.name)
	Api.post("jinggai_model", param, { 'headers': { 'Content-Type': 'multipart/form-data' } }).then((res) => {
		console.log(res)
		tableData.value.push(res)
		done.value = true
	})

}

const dialogVisible = ref(false)
</script>